<script lang="ts" setup name="SystemMenu">
import { ElMessage } from 'element-plus'
import sysMenu from '@/api/modules/system/menu'

const form = ref({
  id: 0,
  name: '',
  link: '',
  class_type: 0,
  value: '',
  level_id: undefined,
})
// 清空对象
const clearForm: any = () => {
  form.value = {
    id: 0,
    name: '',
    link: '',
    class_type: 0,
    value: '',
    level_id: undefined,
  }
}
// 接口等级
const type = ref([])
// 一级目录列表
const menu = ref([] as any[])
// 二级控制列表
const control = ref([] as any[])
// 表格
const data = ref([])
// 获取接口数据
const getList: any = () => {
  sysMenu.index().then((res) => {
    data.value = res.data.list
    type.value = res.data.type
    menu.value = res.data.menu
    control.value = res.data.control
  }).catch((e) => {
    console.log(e)
  })
}

// 新增接口
const add: any = () => {
  sysMenu.add(form.value).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      getList()
      clearForm()
    }
  }).catch((e) => {
    console.log(e)
  })
}

// 修改接口
const edit: any = () => {
  sysMenu.edit(form.value).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      getList()
      clearForm()
    }
  }).catch((e) => {
    console.log(e)
  })
}

// 点击树节点
const clickTree: any = (data: any) => {
  form.value = {
    id: data.id,
    name: data.permission_name,
    link: data.permission_link,
    class_type: data.class_type,
    value: data.permission_value,
    level_id: data.level_id,
  }
}

// 目录选择
const changeClass: any = (value: any, data: any) => {
  data.forEach((item: any) => {
    if (item.id === value) {
      form.value.link = item.link
    }
  })
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div>
    <page-main>
      <el-row>
        <!-- 树形菜单 -->
        <el-col :span="6">
          <el-tree
            :data="data"
            :default-expand-all="true"
            node-key="id"
            @node-click="clickTree"
          />
        </el-col>
        <!-- 编辑或查看详情 -->
        <el-col :span="17">
          <el-form :model="form" label-width="120px">
            <el-form-item label="接口名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="接口等级">
              <el-radio-group v-model="form.class_type" :disabled="form.id !== 0" @change="() => { form.level_id = undefined;form.link = '' }">
                <el-radio v-for="(item, index) in type" :key="index" :label="index" border>
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.class_type === 1 || form.class_type === 2" label="所属父级">
              <el-select v-show="form.class_type === 1" v-model="form.level_id" :disabled="form.id !== 0" placeholder="一级目录" @change="(value) => { changeClass(value, menu) }">
                <el-option
                  v-for="(item, index) in menu"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <el-select v-show="form.class_type === 2" v-model="form.level_id" :disabled="form.id !== 0" placeholder="二级控制" @change="(value) => { changeClass(value, control) }">
                <el-option
                  v-for="(item, index) in control"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="接口路径">
              <el-input v-model="form.link" />
            </el-form-item>
            <el-form-item label="接口权限值">
              <el-input v-model="form.value" />
            </el-form-item>
            <el-form-item>
              <el-button v-if="form.id === 0" type="primary" @click="add">
                新增
              </el-button>
              <el-button v-if="form.id !== 0" type="primary" @click="edit">
                保存
              </el-button>
              <el-button @click="clearForm">
                清空
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </page-main>
  </div>
</template>
